let data = [
    { userName: "YH001", name: "蔡徐坤", affiliation: "市北机构", online: true, onlineIp: "198.09.09.00", File: "机密", Profile: "绝密", Department: "分管理人员", password: "123456", idKick: " " },
    { userName: "YH002", name: "蔡徐坤1", affiliation: "市北机构", online: false, onlineIp: "198.09.09.00", File: "机密", Profile: "绝密", Department: "运维人员", password: "123456", idKick: " " },
    { userName: "YH0013", name: "蔡徐坤2", affiliation: "市北机构", online: false, onlineIp: "198.09.09.00", File: "机密", Profile: "绝密", Department: "运维人员", password: "123456", idKick: " " },
    { userName: "YH0014", name: "蔡徐坤3", affiliation: "市北机构", online: true, onlineIp: "198.09.09.00", File: "机密", Profile: "绝密", Department: "运维人员", password: "123456", idKick: " " },
    { userName: "YH0012", name: "蔡徐坤4", affiliation: "市北机构", online: true, onlineIp: "198.09.09.00", File: "机密", Profile: "绝密", Department: "分管理人员", password: "123456", idKick: " " },
    { userName: "YH0011", name: "蔡徐坤5", affiliation: "市北机构", online: false, onlineIp: "198.09.09.00", File: "机密", Profile: "绝密", Department: "运维人员", password: "123456", idKick: " " },
    { userName: "YH0015", name: "蔡徐坤6", affiliation: "市北机构", online: true, onlineIp: "198.09.09.00", File: "机密", Profile: "绝密", Department: "运维人员", password: "123456", idKick: " " },
    { userName: "YH0061", name: "蔡徐坤6", affiliation: "市北机构", online: false, onlineIp: "198.09.09.00", File: "机密", Profile: "绝密", Department: "分管理人员", password: "123456", idKick: " " },
    { userName: "YH0017", name: "蔡徐坤7", affiliation: "市北机构", online: false, onlineIp: "198.09.09.00", File: "机密", Profile: "绝密", Department: "运维人员", password: "123456", idKick: " " },
    { userName: "YH0015", name: "蔡徐坤8", affiliation: "市北机构", online: true, onlineIp: "198.09.09.00", File: "机密", Profile: "绝密", Department: "运维人员", password: "123456", idKick: " " },
    { userName: "YH0013", name: "蔡徐坤9", affiliation: "市北机构", online: true, onlineIp: "198.09.09.00", File: "机密", Profile: "绝密", Department: "运维人员", password: "123456", idKick: " " },
    { userName: "YH0018", name: "蔡徐坤0", affiliation: "市北机构", online: false, onlineIp: "198.09.09.00", File: "机密", Profile: "绝密", Department: "运维人员", password: "123456", idKick: " " },
    { userName: "YH0019", name: "蔡徐坤45", affiliation: "市北机构", online: true, onlineIp: "198.09.09.00", File: "机密", Profile: "绝密", Department: "运维人员", password: "123456", idKick: " " },
    { userName: "YH0013", name: "蔡徐坤43", affiliation: "市北机构", online: false, onlineIp: "198.09.09.00", File: "机密", Profile: "绝密", Department: "运维人员", password: "123456", idKick: " " },
    { userName: "YH0012", name: "蔡徐坤23", affiliation: "市北机构", online: true, onlineIp: "198.09.09.00", File: "机密", Profile: "绝密", Department: "运维人员", password: "123456", idKick: " " },
    { userName: "YH0019", name: "蔡徐坤464", affiliation: "市北机构", online: false, onlineIp: "198.09.09.00", File: "机密", Profile: "绝密", Department: "运维人员", password: "123456", idKick: " " },
    { userName: "YH0010", name: "蔡徐坤84", affiliation: "市北机构", online: true, onlineIp: "198.09.09.00", File: "机密", Profile: "绝密", Department: "运维人员", password: "123456", idKick: " " },
    { userName: "YH0010", name: "蔡徐坤33", affiliation: "市北机构", online: true, onlineIp: "198.09.09.00", File: "机密", Profile: "绝密", Department: "运维人员", password: "123456", idKick: " " }
];
let page = 1;
const strip = 8;
let dataClone = cloneArr(data);
let tbody = document.querySelector(".content-content>div>table>tbody");
let pagination = document.querySelector(".content-content>div>div>div:nth-child(2)");
let formBtn = document.querySelectorAll(".content-content>div>form>button");
let inquire = cloneArr(dataClone);
let inquireoff = false;
let kickoff = false;
let inputValue = true;
let online = false;
let idRevise = 0;
let reviseoff = false;
function cloneArr(obj) {
    return JSON.parse(JSON.stringify(obj));
}
function render(data) {
    tbody.innerHTML = "";
    pagination.innerHTML = "";
    for (let i = 0; i < data.length; i++) {
        data[i].id = i;
    }
    let sli = data.slice((page - 1) * strip, page * strip);
    for (let i = 0; i < sli.length; i++) {
        let tr = document.createElement("tr");
        tr.dataset.id = sli[i].id;
        tr.innerHTML = `
            <td><input type="checkbox" ${sli[i].idKick}></td>
            <td>${sli[i].userName}</td>
            <td>${sli[i].name}</td>
            <td>${sli[i].affiliation}</td>
            <td>/</td>
            <td>
                <div class="divState">
                    <div></div>
                </div>
            </td>
            <td>${sli[i].online ? "是" : "否"}</td>
            <td>${sli[i].onlineIp}</td>
            <td>${sli[i].File}</td>
            <td>${sli[i].Profile}</td>
            <td>${sli[i].Department}</td>
            <td>
                <button>修改</button>
                <button>重置密码</button>
                <button>删除</button>
            </td>
        `;
        tbody.appendChild(tr);
        if (sli[i].online) {
            tr.children[5].children[0].children[0].style.left = tr.children[5].children[0].offsetWidth - tr.children[5].children[0].children[0].offsetWidth - 1 + "px";
            tr.children[5].children[0].style.backgroundColor = "#1890ff";
        }
    }
    for (let i = 1; i <= Math.ceil(data.length / strip); i++) {
        let div = document.createElement('div');
        div.innerHTML = i;
        if (page == i) {
            div.style.backgroundColor = "#1890ff";
        }
        pagination.appendChild(div);
    }
    let divState = document.querySelectorAll(".divState");
    for (let i = 0; i < divState.length; i++) {
        divState[i].addEventListener("click", function (e) {
            this.children[0].style.transition = "all .3s";
            this.style.transition = "all .3s";
            if (this.children[0].offsetLeft == 1) {
                this.children[0].style.left = this.offsetWidth - this.children[0].offsetWidth - 1 + "px";
                this.style.backgroundColor = "#1890ff";
                this.parentNode.parentNode.children[6].innerText = "是";
                data[this.parentNode.parentNode.dataset.id].online = true;
            } else {
                this.children[0].style.left = "1px";
                this.style.backgroundColor = "";
                this.parentNode.parentNode.children[6].innerText = "否";
                data[this.parentNode.parentNode.dataset.id].online = false;
            }
        });
    }
    if (page == 1) {
        pagination.parentNode.children[0].style.display = "none";
    } else {
        pagination.parentNode.children[0].style.display = "flex";
    }
    if (page == Math.ceil(data.length / strip)) {
        pagination.parentNode.children[2].style.display = "none";
    } else {
        pagination.parentNode.children[2].style.display = "flex";
    }
} render(dataClone);
function paginationClick(e) {
    if (e.target.innerText == "<") {
        page--;
        if (inquireoff) {
            render(inquire);
        } else {
            render(dataClone);
        }
    } else if (e.target.innerText == ">") {
        page++;
        if (inquireoff) {
            render(inquire);
        } else {
            render(dataClone);
        }
    } else if (e.target.parentNode == pagination) {
        page = e.target.innerText;
        if (inquireoff) {
            render(inquire);
        } else {
            render(dataClone);
        }
    }
}
function tBodyDel(e) {
    dataClone.splice(e.target.parentNode.parentNode.dataset.id, 1);
    render(dataClone);
}

function tBody(e) {
    if (e.target.innerText == "删除" && e.target.parentNode.parentNode.parentNode == tbody) {
        tsk("确定删除吗？", function () {
            inquireoff = false;
            tBodyDel(e);
        });
    } else if (e.target.innerText == "重置密码" && e.target.parentNode.parentNode.parentNode == tbody) {
        tsk("确定重置密码吗？", function () {
            for (var i = 0; i < dataClone.length; i++) {
                dataClone[i].password = "123456";
                inquireoff = false;
                render(dataClone);
            }
        });
    } else if (e.target.innerText == "修改" && e.target.parentNode.parentNode.parentNode == tbody) {
        idRevise = 0;
        formBtnNew(e, formRevise);
    } else if (e.target.nodeName == "INPUT" && e.target.parentNode.parentNode.parentNode == tbody) {
        if (inquireoff) {
            if (inquire[e.target.parentNode.parentNode.dataset.id].idKick == " ") {
                inquire[e.target.parentNode.parentNode.dataset.id].idKick = "checked";
            } else if (dataClone[e.target.parentNode.parentNode.dataset.id].idKick == "checked") {
                inquire[e.target.parentNode.parentNode.dataset.id].idKick = " ";
            }
        } else {
            if (dataClone[e.target.parentNode.parentNode.dataset.id].idKick == " ") {
                dataClone[e.target.parentNode.parentNode.dataset.id].idKick = "checked";
            } else if (dataClone[e.target.parentNode.parentNode.dataset.id].idKick == "checked") {
                dataClone[e.target.parentNode.parentNode.dataset.id].idKick = " ";
            }
        }
    }
    function formRevise() {
        let tskFormInput = document.querySelectorAll(".tskForm>div>div>input[type='text']");
        let tskFormSelect = document.querySelector(".tskForm>div>div>select");
        let tskFormDepartment = document.getElementsByName("Department");
        let tskFormFile = document.getElementsByName("file");
        let disStateTsk = document.querySelector(".tskForm>div>div:last-child>.divState");
        idRevise = e.target.parentNode.parentNode.dataset.id;
        tskFormInput[0].value = dataClone[e.target.parentNode.parentNode.dataset.id].userName;
        tskFormInput[1].value = dataClone[e.target.parentNode.parentNode.dataset.id].password;
        tskFormInput[2].value = dataClone[e.target.parentNode.parentNode.dataset.id].password;
        tskFormInput[3].value = dataClone[e.target.parentNode.parentNode.dataset.id].name;
        tskFormSelect.value = dataClone[e.target.parentNode.parentNode.dataset.id].affiliation == "市北机构" ? "机构A" : dataClone[e.target.parentNode.parentNode.dataset.id].affiliation;
        for (var i = 0; i < tskFormDepartment.length; i++) {
            if (tskFormDepartment[i].nextElementSibling.innerText == dataClone[e.target.parentNode.parentNode.dataset.id].Department) {
                tskFormDepartment[i].setAttribute("checked", "checked");
                break;
            }
        }
        for (let i = 0; i < tskFormFile.length; i++) {
            if (tskFormFile[i].nextElementSibling.innerText == dataClone[e.target.parentNode.parentNode.dataset.id].file) {
                tskFormFile[i].setAttribute("checked", "checked");
                break;
            }
        }
        if (dataClone[e.target.parentNode.parentNode.dataset.id].online) {
            disStateTsk.children[0].style.left = disStateTsk.offsetWidth - disStateTsk.children[0].offsetWidth - 1 + "px";
            disStateTsk.style.backgroundColor = "#1890ff";
            online = true;
        } else {
            disStateTsk.children[0].style.left = "1px";
            disStateTsk.style.backgroundColor = "";
            online = false;
        }
    }
}
function formBtnReset(e) {
    let formInput = document.querySelectorAll('.content-content>div>form>div>input');
    let formSelect = document.querySelectorAll('.content-content>div>form>div .divSelect>div:first-child');
    e.preventDefault();
    tsk("确定重置吗？", function () {
        formInput[0].value = "";
        formSelect[0].innerText = "请选择";
        formInput[1].value = "";
        formSelect[1].innerText = "请选择";
        formInput[2].value = "";
        formSelect[2].innerText = "请选择";
        inquireoff = false;
        dataClone = cloneArr(data);
        render(dataClone);
    });
}
function formBtnKick(e) {
    inquireoff = false;
    e.preventDefault();
    tsk("确定踢除所选内容?", function () {
        dataClone = dataClone.filter(function (a) {
            return a.idKick == " ";
        })
        render(dataClone);
    });
}
function formBtnInquire(e) {
    page = 1;
    inquireoff = true;
    e.preventDefault();
    let formInput = document.querySelectorAll('.content-content>div>form>div>input');
    let formSelect = document.querySelectorAll('.content-content>div>form>div .divSelect>div:first-child');
    inquire = dataClone;
    if (formInput[0].value == "" || (formInput[0].value).trim() == "") {
        inquire = inquire;
    } else {
        inquire = dataClone.filter(function (d) { return d.userName.includes(formInput[0].value) });
    }
    if (formInput[1].value == "" || (formInput[1].value).trim() == "") {
        inquire = inquire;
    } else {
        inquire = inquire.filter(function (d) { return d.name.includes(formInput[1].value) });
    }
    if (formInput[2].value == "" || (formInput[2].value).trim() == "") {
        inquire = inquire;
    } else {
        inquire = inquire.filter(function (d) { return d.affiliation.includes(formInput[2].value) });
    }
    if (formSelect[0].innerText == "请选择") {
        inquire = inquire;
    } else {
        inquire = inquire.filter(function (d) { return d.online == (formSelect[0].innerText == "启用" ? true : false) });
    }
    if (formSelect[1].innerText == "请选择") {
        inquire = inquire;
    } else {
        inquire = inquire.filter(function (d) { return d.File.includes(formSelect[1].innerText) });
    }
    if (formSelect[2].innerText == "请选择") {
        inquire = inquire;
    } else {
        inquire = inquire.filter(function (d) { return d.Profile.includes(formSelect[2].innerText) });
    }
    render(inquire);
}
function formNew() {
    tsk(`<div class="tskForm">
        <div>
        <span>用户名：</span>
            <div>
                <input type="text" placeholder="请输入(列如YH001)的5-8位"/>
            </div>
        </div>
        <div>
        <span>密码：</span>
            <div>
                <input type="text" placeholder="请输入6位数" />
            </div>
        </div>
        <div>
        <span>确认密码：</span>
            <div>
                <input type="text" placeholder="必须和密码一致" />
            </div>
        </div>
        <div>
        <span>姓名：</span>
            <div>
                <input type="text" placeholder="请输入2-6个汉字" />
            </div>
        </div>
        <div>
        <span>所属机构：</span>
            <div>
                <select>
                    <option>请选择</option>
                    <option>机构A</option>
                    <option>机构B</option>
                    <option>机构C</option>
                </select>
            </div>
        </div>
        <div>
        <span>角色分配：</span>
            <div>
                <label><input type="radio" name="Department" checked><span>运维人员</span></label>
                <label><input type="radio" name="Department"><span>查看人员</span></label>
                <label><input type="radio" name="Department"><span>入库人员</span></label>
                <label><input type="radio" name="Department"><span>上传人员</span></label>
                <label><input type="radio" name="Department"><span>分管理人员</span></label>
            </div>
        </div>
        <div>
        <span>文件密集：</span>
            <div>
                <label><input type="radio" name="file" checked><span>秘密</span></label>
                <label><input type="radio" name="file"><span>机密</span></label>
                <label><input type="radio" name="file"><span>绝密</span></label>
            </div>
        </div>
        <div>
        <span>账号状态：</span><div><div class="divState"><div></div></div></div>
        </div>
    </div>`, function () {
        let isnull = false;
        let tskFormInput = document.querySelectorAll(".tskForm>div>div>input[type='text']");
        let tskFormSelect = document.querySelector(".tskForm>div>div>select");
        let tskFormDepartment = document.getElementsByName("Department");
        let tskFormFile = document.getElementsByName("file");
        let tskFormDepartmentValue = null;
        let tskFormFileValue = null;
        for (let i = 0; i < tskFormInput.length; i++) {
            if (tskFormInput[i].value == "" || tskFormSelect.value == "请选择") {
                isnull = true;
            }
        }
        for (let i = 0; i < tskFormDepartment.length; i++) {
            if (tskFormDepartment[i].checked) {
                tskFormDepartmentValue = tskFormDepartment[i].nextElementSibling.innerText;
                break;
            }
        }
        for (let i = 0; i < tskFormFile.length; i++) {
            if (tskFormFile[i].checked) {
                tskFormFileValue = tskFormFile[i].nextElementSibling.innerText;
                break;
            }
        }
        if (isnull) {
            tsk("不能为空");
        } else {
            if (inputValue) {
                let inp = { userName: tskFormInput[0].value, name: tskFormInput[3].value, affiliation: tskFormSelect.value, online: online, onlineIp: "198.09.09.00", File: tskFormFileValue, Profile: tskFormFileValue, Department: tskFormDepartmentValue, password: tskFormInput[1].value, idKick: "" }
                if (reviseoff) {
                    dataClone.splice(idRevise, 1, inp);
                } else {
                    dataClone.splice(0, 0, inp);
                }
                render(dataClone);
            } else {
                tsk("请正确输入");
            }
        }
    });
}
function formBtnNew(e, fun) {
    inquireoff = false;
    inputValue = true;
    online = false;
    e.preventDefault();
    if (fun) {
        reviseoff = true;
    } else {
        reviseoff = false;
    }
    formNew();
    fun && fun();
    let disStateTsk = document.querySelector(".tskForm>div>div:last-child>.divState");
    let tskFormInput = document.querySelectorAll(".tskForm>div>div>input[type='text']");
    disStateTsk.addEventListener("click", function (e) {
        this.children[0].style.transition = "all .3s";
        this.style.transition = "all .3s";
        if (this.children[0].offsetLeft == 1) {
            this.children[0].style.left = this.offsetWidth - this.children[0].offsetWidth - 1 + "px";
            this.style.backgroundColor = "#1890ff";
            online = true;
        } else {
            this.children[0].style.left = "1px";
            this.style.backgroundColor = "";
            online = false;
        }
    });
    let rule = [
        { reg: /^[A-Z]{2}[A-Za-z0-9]{3,6}$/g },
        { reg: /^[0-9]{6}$/g },
        { reg: /^[0-9]{6}$/g },
        { reg: /^[\u4E00-\u9FA5]{1,6}$/g }
    ];
    for (var i = 0; i < tskFormInput.length; i++) {
        (function (p) {
            tskFormInput[i].addEventListener("input", function (e) {
                if (rule[p].reg.test(this.value)) {
                    if (p == 2 || p == 3) {
                        if (tskFormInput[1].value == tskFormInput[2].value) {
                            inputValue = true;
                            tskFormInput[p].style.boxShadow = "0 0 5px #3c763d";
                        } else {
                            inputValue = false;
                            tskFormInput[p].style.boxShadow = "0 0 5px #ab4a48";
                        }
                    } else {
                        inputValue = true;
                        tskFormInput[p].style.boxShadow = "0 0 5px #3c763d";
                    }
                } else if (rule[p].reg.test(this.value) == false) {
                    inputValue = false;
                    tskFormInput[p].style.boxShadow = "0 0 5px #ab4a48";
                }
            });
        })(i);
    }
}
document.querySelector(".content-content>div>table>thead>tr>th:first-child>div").addEventListener("click", function (e) {
    if (kickoff == true) {
        if (inquireoff) {
            inquire = inquire.filter(function (a) {
                return a.idKick = " ";
            });
        } else {
            dataClone = dataClone.filter(function (a) {
                return a.idKick = " ";
            });
        }
        kickoff = false;
    } else if (kickoff == false) {
        if (inquireoff) {
            inquire = inquire.filter(function (a) {
                return a.idKick = "checked";
            });
        } else {
            dataClone = dataClone.filter(function (a) {
                return a.idKick = "checked";
            });
        }
        kickoff = true;
    }
    if (inquireoff) {
        render(inquire);
    } else {
        render(dataClone);
    }
});
formBtn[0].addEventListener("click", formBtnInquire);
formBtn[1].addEventListener("click", formBtnReset);
formBtn[2].addEventListener("click", formBtnNew);
formBtn[3].addEventListener("click", formBtnKick);
pagination.parentNode.addEventListener('click', paginationClick);
tbody.addEventListener("click", tBody);